{% extends "app/base_site.html" %}

{% block title %} 控制面板 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
{% endblock stylesheets %}

{% block content %}
  <div class="right_col" role="main">

    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>CPU利用率</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div id="cpuCharts" style="height:220px"></div>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>内存利用率</h2>

              <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div id="memoryCharts" style="height:220px"></div>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>存储利用率</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div id="diskCharts" style="height:220px"></div>
            </div>
          </div>
        </div>

        <div class="col-md-6 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
                <h2>系统信息</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <table class="table table-hover">
                <tbody>
                  <tr>
                    <th scope="row">版本</th>
                    <th scope="row" id="project_version">Version</th>
                  </tr>

                  <tr>
                    <th scope="row">机器</th>
                    <th scope="row" id="os_machine_node">Machine</th>
                  </tr>

                  <tr>
                    <th scope="row">系统</th>
                    <th scope="row" id="os_system_name">System</th>
                  </tr>

                  <tr>
                    <th scope="row">运行</th>
                    <th scope="row" id="os_run_date_str">00:00:00</th>
                  </tr>
                    <tr>
                    <th scope="row">CPU</th>
                    <th scope="row" id="os_cpu_used_rate">0%</th>
                  </tr>

                  <tr>
                    <th scope="row">内存</th>
                    <th scope="row" id="os_virtual_mem_used_rate">0%</th>
                  </tr>

                   <tr>
                    <th scope="row">存储</th>
                    <th scope="row" id="os_disk_used_rate">0%</th>
                  </tr>
                </tbody>
              </table>

            </div>
          </div>
        </div>


        <div class="clearfix"></div>


    </div>


  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super}}

  <script src="/static/lib/highcharts/highcharts.js"></script>
  <script src="/static/lib/highcharts/modules/exporting.js"></script>
  <script src="/static/lib/highcharts-plugins/highcharts-zh_CN.js"></script>

    <script>

    Highcharts.setOptions({
            global: {
                    useUTC: false
            }
    });
    function activeLastPointToolip(chart) {
        let points = chart.series[0].points;
        chart.tooltip.refresh(points[points.length -1]);
    }
    let cpuCharts = Highcharts.chart('cpuCharts', {
		chart: {
				type: 'spline',
				marginRight: 10,
				events: {
                    load: function () {
                        let chart = this;
                        activeLastPointToolip(chart);
                    }
				}
		},
		title: {
				text: null
		},
		xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
		},
		 yAxis: [{
            min:0,
            title: {
                text: null
            },
            showFirstLabel: true
        }],
		tooltip: {
				formatter: function () {
						return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
								Highcharts.numberFormat(this.y, 2);


				}
		},
		legend: {
				enabled: false
		},
		series: [{
				name: 'CPU利用率',
				data: (function () {
						// 生成随机值
						var data = [],
								time = (new Date()).getTime(),
								i;
						for (i = -9; i <= 0; i += 1) {
								data.push({
										x: time + i * 1000,
										y: 0 //Math.random()
								});
						}

						return data;
				}())
		}]
    });
    let memoryCharts = Highcharts.chart('memoryCharts', {
		chart: {
				type: 'spline',
				marginRight: 10,
				events: {
                    load: function () {
                        let chart = this;
                        activeLastPointToolip(chart);
                    }
				}
		},
		title: {
		    text: null
		},
		xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
		},
		 yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
            title: {
                text: null
            },
            showFirstLabel: true
        }],
		tooltip: {
				formatter: function () {
						return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
								Highcharts.numberFormat(this.y, 2);
				}
		},
		legend: {
				enabled: false
		},
		series: [{
				name: '内存利用率',
				data: (function () {
						// 生成随机值
						var data = [],
								time = (new Date()).getTime(),
								i;
						for (i = -9; i <= 0; i += 1) {
								data.push({
										x: time + i * 1000,
										y: 0 //Math.random()
								});
						}

						return data;
				}())
		}]
    });
    let diskCharts = Highcharts.chart('diskCharts', {
		chart: {
				type: 'spline',
				marginRight: 10,
				events: {
                    load: function () {
                        let chart = this;
                        activeLastPointToolip(chart);
                    }
				}
		},
		title: {
				text: null
		},
		xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
		},
		 yAxis: [{
            min:0,
            title: {
                text: null
            },
            showFirstLabel: true
        }],
		tooltip: {
				formatter: function () {
						return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
								Highcharts.numberFormat(this.y, 2);


				}
		},
		legend: {
				enabled: false
		},
		series: [{
				name: '磁盘利用率',
				data: (function () {
						// 生成随机值
						var data = [],
								time = (new Date()).getTime(),
								i;
						for (i = -9; i <= 0; i += 1) {
								data.push({
										x: time + i * 1000,
										y: 0 //Math.random()
								});
						}

						return data;
				}())
		}]
    });

    let eleXcms = $("#xcms");
    let eleXcmsAdmin = $("#xcms_admin");
    let eleXcmsZlm = $("#xcms_zlm");
    let eleXcmsMedia = $("#xcms_media");
    let eleXcmsCore = $("#xcms_core");
    //系统信息
    let eleProjectVersion = $("#project_version");
    let eleOsMachineNode = $("#os_machine_node");
    let eleOsSystemName = $("#os_system_name");
    let ele_os_run_date_str = $("#os_run_date_str");
    let ele_os_cpu_used_rate = $("#os_cpu_used_rate");
    let ele_os_virtual_mem_used_rate = $("#os_virtual_mem_used_rate");
    let ele_os_disk_used_rate = $("#os_disk_used_rate ");

    function f_getIndex() {
        $.ajax({
           url: '/index/getIndex',
           type: "get",
           async: true,
           data: {},
           dataType: "json",
           timeout: 0,
           error: function () {
                myAlert("网络异常，请确定网络正常！","error");
           },
           success: function (res) {
               if(res.code === 1000){
                    try {
                        let osInfo = res["osInfo"];
                        let appInfo = res["appInfo"];

                        let project_version = appInfo["project_version"]
                        let project_flag = appInfo["project_flag"]

                        let system_name = osInfo["system_name"];
                        let machine_node = osInfo["machine_node"];
                        let os_cpu_used_rate = osInfo["os_cpu_used_rate"];
                        let os_virtual_mem_used_rate = osInfo["os_virtual_mem_used_rate"];
                        let os_disk_used_rate = osInfo["os_disk_used_rate"];
                        let os_cpu_used_rate_str = osInfo["os_cpu_used_rate_str"];
                        let os_virtual_mem_used_rate_str = osInfo["os_virtual_mem_used_rate_str"];
                        let os_disk_used_rate_str = osInfo["os_disk_used_rate_str"];
                        let os_run_date_str = osInfo["os_run_date_str"];

                        eleProjectVersion.html("v"+project_version);
                        eleOsMachineNode.html(machine_node);
                        eleOsSystemName.html(system_name);
                        ele_os_run_date_str.html(os_run_date_str);
                        ele_os_cpu_used_rate.html(os_cpu_used_rate_str);
                        ele_os_virtual_mem_used_rate.html(os_virtual_mem_used_rate_str);
                        ele_os_disk_used_rate.html(os_disk_used_rate_str);

                       //设置图表数据
                        let x = (new Date()).getTime();
                        cpuCharts.series[0].addPoint([x, os_cpu_used_rate], true, true);
                        activeLastPointToolip(cpuCharts);
                        memoryCharts.series[0].addPoint([x, os_virtual_mem_used_rate], true, true);
                        activeLastPointToolip(memoryCharts);
                        diskCharts.series[0].addPoint([x, os_disk_used_rate], true, true);
                        activeLastPointToolip(diskCharts);
                    }catch (e) {
                        console.log(e)
                    }
               }else{
                    console.log(res.msg);
               }
               setTimeout(function () {
                   f_getIndex();
               }, 6000);
           }
        });
    }

    window.onload = function (){
        f_getIndex();
    };


</script>
{% endblock javascripts %}

